<template>
  <transition name="fade">
    <div class="dialog-wrapper" v-show="visible" @click.self="closeModal">
      <div class="dialog-content">
        <div class="header">
          {{ title }}
          <i class="sea-icon-close" @click.self="closeModal"></i>
        </div>
        <div class="main">弹窗</div>
        <div class="footer">
          <seaButton type="primary" @on-click="closeModal">确定</seaButton>
          <seaButton @on-click="closeModal">取消</seaButton>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "seaDiaLog",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-wrapper {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .dialog-content {
    width: 30%;
    position: relative;
    top: 100px;
    left: 0;
    margin: 0 auto;
    background: #fff;
    .header {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .main {
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 10px;
    }
    .footer {
      display: flex;
      flex-direction: row-reverse;
      padding: 10px;
      ::v-deep .sea-button:first-child {
        margin-right: 10px;
      }
    }
  }
}
// .fade-enter{
//     opacity: 0;
// }
// .fade-enter-to{
//     opacity: 1;
// }
// .fade-enter-active{
//     transition: all .5s;
// }
// .fade-leave{
//     opacity: 1;
// }
// .fade-leave-to{
//     opacity: 0;
// }
// .fade-leave-active{
//     transition: all .5s;
// }
.fade-enter-active{
    animation:run .5s ;
}
.fade-leave-active {
    animation:run .5s reverse;
}

@keyframes run{
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
